<template>
    <div class="workTimeBox">
        <div class="row infoBox">
            <span class="row infoSpan">工单编号: {{ orderNo }}</span>
            <span class="row infoSpan">工序 : {{ workTimerInfo.flow }}</span>
            <span class="row infoSpan">工序状态 : {{ woStatus }}</span>
        </div>
        <!-- <div v-else class="row infoBox">
            <span class="row infoSpan">Not Allowed</span>
        </div> -->
    </div>

    <div v-if="allowAction" class="row workTimeBtnGp">
        <div class="row startBtnBox">
            <q-btn push class="color-startgreen startBtn" label="开始" :disable="userStore.currentDept.source === wodetailsStore.orderInfo.source_code && allowAction?(woStatus === '生产中' || woStatus === '已完成工序')||!allowAction:true" @click="changeWOStatus('start')">
                <q-icon name="fa-solid fa-circle-play spcSVG" class=""/>
            </q-btn>
        </div>
        <div class="row pauseBtnBox">
            <q-btn push class="color-paused pauseBtn" label="暂停" :disable="allowAction?!(woStatus === '生产中')||!allowAction: true" @click="changeWOStatus('pause')">
                <q-icon name="fa-solid fa-circle-pause spcSVG" class=""/>
            </q-btn>
        </div>
        <div class="row completeBtnBox">
            <q-btn push class="color-donepurple completeBtn" label="完成工单" :disable="allowAction?(woStatus === '未开始' || woStatus === '已完成工序')||!allowAction: true" @click="changeWOStatus('complete')">
                <q-icon name="fa-solid fa-calendar-check spcSVG" class=""/>
            </q-btn>
        </div>
    </div>

</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from 'src/stores/modules/userStore'
import { useWoDetailsStore } from 'src/stores/modules/wodetailsStore'
import { useMassScanStore } from 'src/stores/modules/massScanStore'

const userStore = useUserStore()
const wodetailsStore = useWoDetailsStore()
const massScanStore = useMassScanStore()
let role = null
let roleName = null
let accID = null
let allowAction = ref(false)
const workTimerInfo = ref([])
const orderNo = ref('')
const woStatus = ref('')
const woTime = ref('')


const initWorkTimePage = () => {
    console.log('initializing work time page 1111...')

    // Get user role
    role = (userStore.currentDept != null) ? userStore.currentDept.roleGroup : null
    roleName = (userStore.currentDept != null) ? userStore.currentDept.role : null
    accID = userStore.currentDept.accID

    // Check If allow to do any actions for this wo
    allowAction.value = wodetailsStore.allowAction
    //   if(allowAction.value){
    console.log(allowAction.value);
    orderNo.value = wodetailsStore.getOrderNo
    console.log('wodetailsStore: ', wodetailsStore)
    workTimerInfo.value = wodetailsStore.getWorkTimer
    // workTimerInfo.value = workTimerInfo.value[0];
    console.log('getWorkTimer: ', wodetailsStore.getWorkTimer)
    console.log('workTimerInfo: ', workTimerInfo.value)
    woStatus.value = (workTimerInfo.value.action === 'start' || workTimerInfo.value.action === 'restart' ) ? '生产中' : (workTimerInfo.value.action === 'pause') ? '暂停' :
        (workTimerInfo.value.action === 'complete') ? '已完成工序' : '未开始'

    // (workTimerInfo.value.action === 'start') ? woStatus.value = '生产中' : (workTimerInfo.value.action === 'pause') ? woStatus.value = '暂停'
    //     : (workTimerInfo.value.action === 'complete') ? woStatus.value = '已完成工序' : woStatus.value = '未开始'
    console.log('workTimerInfo.value.action: ', workTimerInfo.value.action)
    console.log('woStatus: ', woStatus.value)
    woTime.value = workTimerInfo.value.time
    //   }
}
initWorkTimePage()

const changeWOStatus = async (action) => {
  const woArr = []
  woArr.push(orderNo.value)
  if (action === 'start') {
    // call start api
    workTimerInfo.value.action = 'start'
    woStatus.value = '生产中'
  } else if (action === 'pause') {
    // call pause api
    workTimerInfo.value.action = 'pause'
    woStatus.value = '暂停'
  } else if (action === 'complete') {
    // call complete api
    workTimerInfo.value.action = 'complete'
    woStatus.value = '已完成工序'
  } else {
    console.log('action not found.')
  }

  // call api
  const res = await massScanStore.changeWOStatus(accID, woArr, action)
  if(res){
    // success msg
  }else{
    // error
  }
}



</script>

<style lang="scss" scoped>
    .workTimeBox{
        width: 90%;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        padding: 10px 10px 10px 10px;
        border-radius: 5px;
        .row{
            width:100%;
        }
        .infoBox{
            .infoSpan{
                font-weight: bold;
                font-size: 1.5rem;
                @media (max-width:480px){
                font-size: 1rem !important;
                }
            }
        }
    }
    .workTimeBtnGp{
        width: 90%;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        .startBtnBox, .pauseBtnBox, .completeBtnBox{
            margin-top: 20px;
            margin-bottom: 10px;
            width: 100%;
            .startBtn, .pauseBtn, .completeBtn{
                font-size: 1.3rem;
                width: 100%;
                padding-top: 15px;
                padding-bottom: 15px;
                .spcSVG{
                    margin-left: 20px;
                }
            }
            .q-btn.disabled{
                background-color: #C0C0C0 !important;
            }
        }
    }
</style>
